<template>
  <div class="device-list">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="field"
      width="800px"
      @close="handleClose"
      custom-class="dialog-search-form"   
    >
      <card-table>
        <div class="card-table-header-btns" style="margin-bottom: 20px">
         <el-button
            class="btn-search"
            size="small"
            icon="el-icon-plus"
            @click="handleClick(null, 'add')"
            >添加</el-button
          >
          <el-button
            class="btn-search"
            size="small"
            icon="el-icon-delete"
            :disabled="btnDisabled"
            @click="handleClick(null, 'delete')"
            >删除</el-button
          >
          <el-button class="btn-search" size="small" icon="el-icon-download"
            >导入</el-button
          >
          <el-button class="btn-search" size="small" icon="el-icon-upload2"
            >导出</el-button
          >

          <el-input
            v-model="input"
            placeholder="请输入SN号"
            style="width: 250px; margin-left: 10px"
            clearable
            size="small"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <el-table
          :key="tableKey"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{ background: '#eff3f8', color: '#333' }"
          stripe
          size="small"
          :default-sort="{ prop: 'date', order: 'descending' }"
          max-height="500"
          @selection-change="handleSelectionChange"
          highlight-selection-row
          border
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            v-for="item in tableHeader"
            v-if="item.visible"
            :key="item.prop"
            :label="item.title"
            :min-width="item.width"
            :prop="item.prop"
            :show-overflow-tooltip="true"
            :align="item.align"
            sortable
            :fixed="item.fixed"
          >
          </el-table-column>
          <!-- <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-document"
              @click="handleClick(scope.row, 'detail')"
              >详情</el-button
            >
          </template>
        </el-table-column> -->
        </el-table>

        <div style="margin-top: 15px">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </card-table>
    </el-dialog>
    <el-dialog :visible.sync="dialogUpdateVisible" title="添加升级SN号范围"
      width="500px">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-width="100px"
        class="dialog-ruleForm"
      >
        <el-form-item label="起始SN号">
          <el-input v-model="ruleForm.name" clearable />
        </el-form-item>
        <el-form-item label="添加条数">
          <el-input v-model="ruleForm.name" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogUpdateVisible = false"
          >确 定</el-button
        >
      </span>
    
    </el-dialog>
  </div>
</template>
<script>
import CardSearch from "@/components/CardSearch";
import CardTable from "@/components/CardTable";
import TableAction from "@/components/TableAction";
export default {
  components: {
    CardSearch,
    CardTable,
    TableAction,
  },
  data() {
    return {
      tableKey: 0, // 用于强制刷新表格
      searchCardShow: false,
      ruleForm:{},
      input: "",
      tableHeader: [
        {
          title: "SN号",
          prop: "SN",
          width: "200",
          visible: true,
          align: "left",
          fixed: true,
        },
      ],
      tableData: [],
      multipleSelection: [],
      btnDisabled: true,
      currentPage: 1,
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        valueSelcet: '',
        dialogUpdateVisible: false
    };
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    field: {
      type: String,
      default: "",
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("close", val);
      },
    },
  },
  mounted() {
    this.initTable();
  },
  methods: {
    initTable() {
      this.tableData = [
        {
          projectName: "KTWG15980001",
          projectAdmin: "智能空调1",
          company: "香缇澜山二期",
          totleNum: "-",
          onlineNum: "-",
          offlineNum: "空调交流lora",
          personInCharge: "在线",
          address: "21.9℃",
          outdoorTemp: "14.0℃",
        },
        {
          projectName: "KTWG15980001",
          projectAdmin: "智能空调1",
          company: "香缇澜山二期",
          totleNum: "-",
          onlineNum: "-",
          offlineNum: "空调交流lora",
          personInCharge: "在线",
          address: "21.9℃",
          outdoorTemp: "14.0℃",
          switchStatus: "开机",
          targetTemp: "22℃",
          workStatus: "未启动",
          networkLock: "解锁",
          tempMode: "-",
          schedule: "未启动",
          signalStrength: "90",
          remark: "-",
        },
        {
          projectName: "KTWG15980001",
          projectAdmin: "智能空调2",
          company: "香缇澜山二期",
          totleNum: "-",
          onlineNum: "-",
          offlineNum: "空调交流lora",
          personInCharge: "离线",
          address: "21.9℃",
          outdoorTemp: "14.0℃",
          switchStatus: "开机",
          targetTemp: "22℃",
          workStatus: "已启动",
          networkLock: "开放开关机",
          tempMode: "-",
          schedule: "已启用",
          signalStrength: "90",
          remark: "-",
        },
        {
          projectName: "KTWG15980001",
          projectAdmin: "智能空调5",
          company: "香缇澜山二期",
          totleNum: "-",
          onlineNum: "-",
          offlineNum: "空调交流lora",
          personInCharge: "在线",
          address: "21.9℃",
          outdoorTemp: "14.0℃",
          switchStatus: "开机",
          targetTemp: "22℃",
          workStatus: "运行中",
          networkLock: "已锁定",
          tempMode: "-",
          schedule: "已启用",
          signalStrength: "90",
          remark: "-",
        },
        {
          projectName: "KTWG15980001",
          projectAdmin: "智能空调3",
          company: "香缇澜山二期",
          totleNum: "-",
          onlineNum: "-",
          offlineNum: "空调交流lora",
          personInCharge: "在线",
          address: "21.9℃",
          outdoorTemp: "14.0℃",
          switchStatus: "开机",
          targetTemp: "22℃",
          workStatus: "运行中",
          networkLock: "已锁定",
          tempMode: "-",
          schedule: "已启用",
          signalStrength: "90",
          remark: "-",
        },
      ];
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.multipleSelection.length > 0) {
        this.btnDisabled = false;
      } else {
        this.btnDisabled = true;
      }
    },
    handleClick(row, field) {
      switch (field) {
        case "add":
          this.dialogUpdateVisible = true
          break;
        case "delete":
          this.$confirm(
            `确认删除选中的${this.multipleSelection.length}个设备版本吗?`,
            "系统提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          ).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
          break;
        default:
          break;
      }
    },
    // 处理表头显示隐藏
    handleCheckChange(checkedValues) {
      this.tableHeader.forEach((item) => {
        item.visible = checkedValues.includes(item.prop);
      });
      this.tableKey += 1;
    },
    handleSearchClick() {
      console.log("搜索按钮点击");
      this.searchCardShow = !this.searchCardShow;
    },
    handleInitClick() {
      this.initTable();
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit("close");
    },
  },
};
</script>
